/*------------------------------ nav bar ------------------------------*/
@media screen and (max-width: 1265px) {
  .menubar {
    display: block;
  }

  .lines_icon {
    display: block;
  }
  nav ul {
    display: none;
  }
}

/*------------------------------ hero section -----------------------------*/
@media screen and (max-width: 678px) {
  .slider .list .item .content {
    padding-right: 0;
  }
  .slider .list .item .content .title {
    font-size: 50px;
  }
}

@media screen and (max-width: 944px) {
  .slider .list .item .content .title {
    font-size: 1.8em;
    font-weight: 700;
    line-height: 1.2em;
  }
  .slider .list .item .content .description {
    font-size: 1.1em;
    line-height: 1.3em;
    margin-top: 10px;
  }
}

@media screen and (max-width: 833px) {
  .slider .list .item .content .title {
    font-size: 1.5em;
    font-weight: 600;
    line-height: 1.2em;
  }
  .slider .list .item .content .description {
    font-size: 0.9em;
    line-height: 1.3em;
    margin-top: 10px;
  }
}

@media screen and (max-width: 720px) {
  .slider .list .item .content {
    top: 20%;
    width: 45%;
    max-width: 80%;
    left: 26%;
  }
}

@media screen and (max-width: 471px) {
  .slider .list .item .content {
    top: 20%;
    width: 65%;
    max-width: 80%;
    left: 36%;
  }
}

@media screen and (max-width: 435px) {
  nav .logo h1 {
    display: none;
  }

  .slider .list .item .content .title {
    font-size: 1.3em;
    font-weight: 600;
    line-height: 1.2em;
  }
  .slider .list .item .content .description {
    font-size: 0.8em;
    line-height: 1.2em;
    margin-top: 10px;
  }

  .slider .list .item .button button {
    width: 8em;
    height: 2.6em;
    line-height: 2.5em;
    font-size: 14px;
    font-weight: 500;
  }
}

@media screen and (max-width: 353px) {
  .slider .list .item .content .title {
    font-size: 1.1em;
    font-weight: 600;
    line-height: 1.2em;
  }
  .slider .list .item .content .description {
    font-size: 0.7em;
    line-height: 1.2em;
    margin-top: 10px;
  }
}

/*------------------------------ marketing section -----------------------------*/


@media screen and (max-width: 990px) {
  .markting-sec .content .cards{
    justify-content: center;
  }
 .markting-sec .content .cards .card {
  min-width: 45%;
  }
}

@media screen and (max-width: 746px){
  .markting-sec .content .cards .card {
    min-width: 80%;
    }

    .markting-sec .head {
      font-size: 1.2em;
    }
    .content .cards .card p.small {
      font-size: 16px;
      font-weight: normal;
      line-height: 1.3em;
    
    }
}

@media screen and (max-width: 500px){

  .markting-sec .head {
    font-size: 1em;
  }
  .markting-sec .content .cards .card {
    min-width: 90%;
    }

}

@media screen and (max-width: 475px){
  .markting-sec .content .cards .card {
    min-width: 95%;
    }
}

/*------------------------------ why chose section -----------------------------*/

@media screen and (max-width: 645px){
  .why-chose .head h1 {
    margin: 40px 0;
    font-size: 30px;
  }
}

@media screen and (max-width: 460px){
  .why-chose .head h1 {
    margin: 40px 0;
    font-size: 25px;
  }
}

@media screen and (max-width: 340px){
  .why-chose .head h1 {
    margin: 40px 0;
    font-size: 20px;
  }
}

/*------------------------------ slider videos section ------------------------------*/
@media screen and(max-width: 1200px) {
  .videos .container {
    padding: 0 3%;
  }

  .videos .container .content ul li {
    max-width: 120px;
    min-width: 60px;
  }
}

@media screen and (max-width: 768px) {
  .videos .container {
    height: 80vh; 
  }

  .videos .container .content {
    flex-direction: column;
  }

  .videos .container .content video {
    height: auto;
  }

  .videos .container .content ul li {
    max-width: 100px;
  }

}

@media screen and (max-width: 550px){
  .videos .container {
    height: 70vh; 
  }
}

@media screen and (max-width: 480px) {
  .videos .container {
    padding: 0 2%;
  }

  .videos .container .content ul li {
    max-width: 80px;
  }

  .videos .container .content ul {
    bottom: 10px;
  }
}

@media screen and (max-width: 400px) {
  .videos .container {
    height: 50vh; 
  }

  .videos .container .content ul li {
    max-width: 70px;
  }

  .videos .container .content ul {
    bottom: 10px;
  }
}

/*------------------------------ plan section ------------------------------*/

@media screen and (max-width: 992px){
  .plan .head h1 {
    font-size: 30px;
  }
}

@media screen and (max-width: 741px){
  .plan .head h1 {
    font-size: 25px;
  }
}

@media screen and (max-width: 671px){
  .plan .head h1 {
    font-size: 20px;
  }
}

@media screen and (max-width: 494px){
  .plan .head h1 {
    font-size: 20px;
    border-bottom: none;
    text-align: center;
  }
}

/*------------------------------ Opinions section ------------------------------*/
@media screen and (max-width: 866px){
  .Opinions .content .wrapper-video {
    width: 60%;
  }
}

@media screen and (max-width: 760px){
  .Opinions .head h1{
    font-size: 35px;
  }
}

@media screen and (max-width: 630px){
  .Opinions .head h1{
    font-size: 30px;
  }
}

@media screen and (max-width: 580px){
  .Opinions .content .wrapper-video {
    width: 70%;
  }
  .Opinions .content .slider .slides .slide p {
    font-size: 12px;
  }
}

@media screen and (max-width: 470px){
  .Opinions .content .wrapper-video {
    width: 80%;
  }
  .Opinions .head h1{
    font-size: 27px;
  }
}

@media screen and (max-width: 400px){
  .Opinions .content .wrapper-video {
    width: 100%;
  }
  
  .Opinions .content .slider .slides .slide p {
    font-size: 10px;
  }

  .Opinions .head h1{
    font-size: 25px;
  }
}

/*------------------------------ footer section ------------------------------*/

@media screen and (max-width: 1180px){
  .footer .container .accordion .contentBx {
    width: 80%;
    margin:7px auto;
  }
}

@media screen and (max-width: 1180px){
  .footer .container .accordion .contentBx {
    width: 100%;
    margin:7px auto;
  }
}

@media screen and (max-width: 745px){
  .footer .heading h1{
    font-size: 25px;
  }
}

@media screen and (max-width: 550px){
  .footer .heading h1{
    font-size: 20px;
  }
}

@media screen and (max-width: 500px){
  .footer .container .accordion .contentBx .label {
    font-size: 14px;
  }
  .footer .container .accordion .contentBx .content {
    font-size: 14px;
  }
  
}

@media screen and (max-width: 415px){
  .footer .container .accordion .contentBx .label {
    font-size: 12px;
  }
  .footer .container .accordion .contentBx .content {
    font-size: 12px;
  }
  
}

@media screen and (max-width: 364px){
  .footer .container .accordion .contentBx .label {
    font-size: 10px;
  }

  .footer .container .accordion .contentBx .content {
    font-size: 10px;
  }
  
}

@media screen and (max-width: 620px){
  .free button {
    font-size: 12px;
  }
}

@media screen and (max-width: 430px){
  .free button {
    font-size: 10px;
  }
}